/**
 * 头部导航交互功能
 */

// 移动端搜索框状态
let mobileSearchVisible = false;
let mobileMenuVisible = false;

// 页面加载完成后初始化
$(document).ready(function() {
    initHeaderEvents();
    initMobileOptimizations();
});

/**
 * 初始化头部事件
 */
function initHeaderEvents() {
    // 搜索框回车事件
    $('#search-input, #mobile-search-input').on('keypress', function(e) {
        if (e.which === 13) {
            doSearch();
        }
    });

    // 点击外部关闭移动端搜索框
    $(document).on('click', function(e) {
        if (mobileSearchVisible && !$(e.target).closest('#mobile-search, [onclick*="toggleMobileSearch"]').length) {
            hideMobileSearch();
        }
    });

    // 点击外部关闭移动端菜单
    $(document).on('click', function(e) {
        if (mobileMenuVisible && !$(e.target).closest('.mobile-menu, [onclick*="toggleMobileMenu"]').length) {
            hideMobileMenu();
        }
    });

    // 滚动时隐藏移动端菜单
    $(window).on('scroll', function() {
        if (mobileMenuVisible) {
            hideMobileMenu();
        }
    });
}

/**
 * 初始化移动端优化
 */
function initMobileOptimizations() {
    // 检测触摸设备
    if ('ontouchstart' in window) {
        $('body').addClass('touch-device');
        
        // 添加触摸反馈
        $('.touchable').on('touchstart', function() {
            $(this).addClass('touching');
        }).on('touchend touchcancel', function() {
            $(this).removeClass('touching');
        });
    }

    // 防止iOS双击缩放
    let lastTouchEnd = 0;
    $(document).on('touchend', function(e) {
        const now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
            e.preventDefault();
        }
        lastTouchEnd = now;
    });

    // 优化输入框焦点处理
    $('input, textarea').on('focus', function() {
        // 延迟滚动到输入框位置，避免键盘遮挡
        setTimeout(() => {
            if ($(this).is(':focus')) {
                this.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }, 300);
    });
}

/**
 * 切换移动端搜索框
 */
function toggleMobileSearch() {
    if (mobileSearchVisible) {
        hideMobileSearch();
    } else {
        showMobileSearch();
    }
}

/**
 * 显示移动端搜索框
 */
function showMobileSearch() {
    $('#mobile-search').removeClass('hidden').hide().slideDown(300);
    $('#mobile-search-input').focus();
    mobileSearchVisible = true;
    
    // 添加动画效果
    setTimeout(() => {
        $('#mobile-search').addClass('show');
    }, 10);
}

/**
 * 隐藏移动端搜索框
 */
function hideMobileSearch() {
    $('#mobile-search').slideUp(300, function() {
        $(this).addClass('hidden').removeClass('show');
    });
    $('#mobile-search-input').blur();
    mobileSearchVisible = false;
}

/**
 * 切换移动端菜单
 */
function toggleMobileMenu() {
    if (mobileMenuVisible) {
        hideMobileMenu();
    } else {
        showMobileMenu();
    }
}

/**
 * 显示移动端菜单
 */
function showMobileMenu() {
    // 创建移动端菜单（如果不存在）
    if (!$('#mobile-menu').length) {
        createMobileMenu();
    }
    
    $('#mobile-menu').removeClass('hidden').addClass('show');
    $('#mobile-menu-icon').removeClass('fa-bars').addClass('fa-times');
    mobileMenuVisible = true;
    
    // 防止背景滚动
    $('body').addClass('overflow-hidden');
}

/**
 * 隐藏移动端菜单
 */
function hideMobileMenu() {
    $('#mobile-menu').removeClass('show').addClass('hidden');
    $('#mobile-menu-icon').removeClass('fa-times').addClass('fa-bars');
    mobileMenuVisible = false;
    
    // 恢复背景滚动
    $('body').removeClass('overflow-hidden');
}

/**
 * 创建移动端菜单
 */
function createMobileMenu() {
    const menuHtml = `
        <div id="mobile-menu" class="nav-menu hidden">
            <a href="/" class="nav-menu-item">
                <i class="fas fa-home mr-3"></i>首页
            </a>
            <a href="/goods" class="nav-menu-item">
                <i class="fas fa-shopping-bag mr-3"></i>商品
            </a>
            <a href="/category" class="nav-menu-item">
                <i class="fas fa-th-large mr-3"></i>分类
            </a>
            <a href="/user" class="nav-menu-item">
                <i class="fas fa-user mr-3"></i>个人中心
            </a>
            <a href="/user/orders" class="nav-menu-item">
                <i class="fas fa-list-alt mr-3"></i>我的订单
            </a>
            <a href="/user/vip" class="nav-menu-item">
                <i class="fas fa-crown mr-3"></i>VIP会员
            </a>
            <a href="/user/sign" class="nav-menu-item">
                <i class="fas fa-calendar-check mr-3"></i>签到
            </a>
            <div class="nav-menu-item border-t border-gray-200 mt-2 pt-4">
                <div class="flex items-center justify-between">
                    <span class="text-gray-600">主题模式</span>
                    <button onclick="toggleTheme()" class="p-2 rounded-lg bg-gray-100 touchable">
                        <i class="fas fa-moon theme-icon"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
    
    $('header').after(menuHtml);
}

/**
 * 执行搜索
 */
function doSearch() {
    const keyword = $('#search-input').val().trim() || $('#mobile-search-input').val().trim();
    
    if (!keyword) {
        showError('请输入搜索关键词');
        return;
    }
    
    // 跳转到搜索结果页
    window.location.href = `/search?keyword=${encodeURIComponent(keyword)}`;
}

/**
 * 移动端搜索
 */
function doMobileSearch() {
    doSearch();
}

/**
 * 切换主题
 */
function toggleTheme() {
    const currentTheme = localStorage.getItem('theme') || 'light';
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    
    localStorage.setItem('theme', newTheme);
    document.documentElement.setAttribute('data-theme', newTheme);
    
    // 更新图标
    const icon = $('.theme-icon');
    if (newTheme === 'dark') {
        icon.removeClass('fa-moon').addClass('fa-sun');
    } else {
        icon.removeClass('fa-sun').addClass('fa-moon');
    }
    
    showSuccess(`已切换到${newTheme === 'dark' ? '深色' : '浅色'}模式`);
}

/**
 * 初始化主题
 */
function initTheme() {
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-theme', savedTheme);
    
    // 更新图标
    const icon = $('.theme-icon');
    if (savedTheme === 'dark') {
        icon.removeClass('fa-moon').addClass('fa-sun');
    } else {
        icon.removeClass('fa-sun').addClass('fa-moon');
    }
}

// 页面加载时初始化主题
$(document).ready(function() {
    initTheme();
});

// 处理窗口大小变化
$(window).on('resize', function() {
    // 如果切换到桌面端，隐藏移动端菜单
    if ($(window).width() >= 1024 && mobileMenuVisible) {
        hideMobileMenu();
    }
    
    // 如果切换到桌面端，隐藏移动端搜索框
    if ($(window).width() >= 768 && mobileSearchVisible) {
        hideMobileSearch();
    }
});

// 全局函数导出
window.toggleMobileSearch = toggleMobileSearch;
window.toggleMobileMenu = toggleMobileMenu;
window.doSearch = doSearch;
window.doMobileSearch = doMobileSearch;
window.toggleTheme = toggleTheme;
